import React, { useEffect, useState } from "react";
import { View, Text } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { postFeedback, getFeedbackList } from "../../api";
import { FeedbackItem } from "types/question";
import { setToken, getToken } from "../../utils/cookies";
import { Tag, Button, Dialog, TextArea, Uploader, Toast, ImagePreview, Image } from '@nutui/nutui-react-taro'
import { Plus } from '@nutui/icons-react-taro'
import { showLoading, hideLoading } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import './index.less'
const prefix = 'feedback'
const resultMap = {
  pending: {
    type: '',
    text: <Tag type="warning">处理中</Tag>
  },
  complete: {
    type: '',
    text: <Tag type="success">已完成</Tag>
  },
  invalid: {
    type: '',
    text: <Tag type="danger">已失效</Tag>
  },
  reject: {
    type: '',
    text: <Tag type="danger">已拒绝</Tag>
  }
}
const Index = () => {
  const router = useRouter();
  const { db_man } = router.params;
  const [dataList, setDataList] = React.useState<FeedbackItem[]>([]) // 反馈列表
  const [visible, setVisible] = useState<boolean>(false) // 反馈弹窗
  const [value, setValue] = useState('') // 反馈内容
  const [fileValue, setFileValue] = useState<any>([]) // 反馈文件数据
  const [progressPercent, setProgressPercent] = useState(0) // 反馈进度条控制
  const [showPreview, setShowPreview] = useState(false)
  const [previewImage, setPreviewImage] = useState<Array<{ src: string }>>([])
  const onProgress = ({ event, options, percentage }: any) => {
    setProgressPercent(percentage)
  }
  if (db_man) {
    setToken('db_man', db_man)
  }
  const fetchList = async () => {
    try {
      showLoading({
        title: '加载中...',
        mask: true // 防止触摸穿透
      })
      let { data, success } = await getFeedbackList({ pageSize: 100 })
      if (success) {
        setDataList(data.list)
        // console.log(data.list, '数据')
      }

    } catch (error) {

    } finally {
      hideLoading()
    }
  }
  useEffect(() => {
    fetchList()
  }, [])
  return (
    <View className={`${prefix}`}>
      {dataList.map((item, index) => {
        return (
          <View className={`${prefix}-item`} key={index}>
            <View className={`${prefix}-label`}>
              <Text className={`${prefix}-label-title`}>反馈内容：</Text>
              <Text className={`${prefix}-label-value`} numberOfLines={2} >{item.created_content}</Text>
            </View>
            <View className={`${prefix}-label`}>
              <Text className={`${prefix}-label-title`}>反馈图片：</Text>
              <Image onClick={() => {
                if (item.feedback_images && item.feedback_images.length > 0) {
                  setPreviewImage(item.feedback_images.map((item: string) => { return { src: item } }))
                  setShowPreview(true)
                }
              }} src={item.feedback_images && item.feedback_images[0]} style={{ width: 40, height: 30 }}></Image>
            </View>
            <View className={`${prefix}-label`}>
              <Text className={`${prefix}-label-title`}>反馈时间：</Text>
              <Text className={`${prefix}-label-value`} numberOfLines={2} >{item.created_time}</Text>
            </View>
            <View className={`${prefix}-label`}>
              <Text className={`${prefix}-label-title`}>反馈人员：</Text>
              <Text className={`${prefix}-label-value`} numberOfLines={2} >{item.creator}</Text>
            </View>
            <View className={`${prefix}-label`}>
              <Text className={`${prefix}-label-title`}>处理进度：</Text>
              <Text className={`${prefix}-label-value`} numberOfLines={2} >{resultMap[item.question_status]?.text || ''}</Text>
            </View>
            {item.handling_result && <View className={`${prefix}-label`}>
              <Text className={`${prefix}-label-title`}>处理结果：</Text>
              <Text className={`${prefix}-label-value`} numberOfLines={2} >{item.handling_result}</Text>
            </View>}
          </View>
        )
      })}
      <View className={`${prefix}-footer`}>
        <View className={`${prefix}-footer-btn`}>
          <Button onClick={() => {
            setVisible(true)
          }} style={{ width: '100%' }} icon={<Plus />} type="success">我要反馈</Button>
        </View>

      </View>
      <Dialog
        className="test-dialog"
        title="问题反馈"
        visible={visible}
        onConfirm={async () => {
          if (!value) return Toast.show('text', {
            content: '请输入反馈内容',
            position: 'bottom',
            duration: 2000
          })
          let { data, success, message } = await postFeedback({
            created_content: value,
            feedback_images: JSON.stringify(fileValue)
          })
          if (success) {
            setVisible(false)
            setValue('')
            setFileValue([])
            fetchList()
          }
          Toast.show('text', {
            content: message,
            position: 'bottom',
            duration: 2000
          })
        }}
        onCancel={() => setVisible(false)}

      >
        <TextArea value={value} onChange={(value) => setValue(value)} showCount maxLength={40}></TextArea>
        {/* <Uploader url={'https://dbyxs.xyz/img'} headers={{
          // cookie: getToken(),
          Authorization: 'Bearer ' + getToken(),
        }} multiple maxCount="3" onFailure={() => {
          hideLoading()
        }} onSuccess={(e) => {
          let { responseText } = e
          let { prdUrl } = JSON.parse(responseText).data
          setFileValue([prdUrl])
          hideLoading()
          // console.log(JSON.parse(responseText))
        }}
          onDelete={(e) => {
            console.log(e)
            // setFileValue([])
            hideLoading()
          }}
          onChange={(e) => {

          }} onProgress={onProgress}></Uploader> */}

      </Dialog>
      {/* 图片预览 */}
      <ImagePreview
        autoPlay
        images={previewImage}
        visible={showPreview}
        onClose={() => setShowPreview(false)}
      />
    </View>
  )
}
export default Index
